<template>
    <div>
        
         <div id="login">
            
            <van-icon 
            
            class="left" name="arrow-left" size="21" @click="Back"/>

            <span>登录</span>
         </div> 
       <!-- 登录注册 input -->
         <div class="login">
            <van-icon class="phone" name="phone-o" />
            <input id="phone"
            maxlength="11"
             @blur="checkName" :state="phoneState"
            v-model="phone"
            autofocus
            required
            type="text" placeholder="   输入手机账号">
            </div>

         <div class="login">
       <van-icon class="mima" name="bag-o" />
            <input
            @input="search"
            maxlength="16"
             @blur="checkPwd" :state="pwdState"
            v-model="pwd"
            ref="pwd"
            autofocus
            required
            class="pwd" type="password" placeholder="   输入密码">
            </div>
            <div class="bg">
            <img src="/img/tx/login1.png" alt="">
             <p id="warning" class="warn1"></p>
            </div>
            <!-- 登录注册按钮 -->
             <div class="btn1" ref="btn1" @click="checkForm">登录</div> 
            <router-link to="/register">
            <div class="btn2" id="register">快速注册</div>
           </router-link>
        
           

    </div>
</template>


<script>
// import { reactive, toRefs } from 'vue'

export default {
    data() {
        return {
        phone:'',
    phoneState:'',
    pwd:'',
    pwdState:'',

        }
    },
   
    
    methods: {
        search(){
           
            if(this.$refs.pwd.value.length >= 6 ){
                this.$refs.btn1.classList.add("active")
            }else{
                this.$refs.btn1.classList.remove("active")

            }
        },

          // 返回上一个页面
    Back(){
         this.$router.push('/')
         this.$refs.pwd.value = ''
         phone.value = ''
    },


        checkForm(){

      if(this.checkName() && 
         this.checkPwd()){
        console.log('验证成功，执行注册业务...')  
        // 发送post请求，执行注册业务
        let params = `username=${this.phone}&password=${this.pwd}`
        console.log(params);
     this. axios.post('http://localhost:3000/login', params).then(res=>{
          console.log(res)
          if(res.data.code==200){ // 登录成功
          sessionStorage.setItem("username", `${this.phone}`) ;
            this.$router.push('/')
          }else {  // 登录失败
             this.$messagebox('提示', '账号密码输入错误')
          }
        })
      }
    },
      checkName(){
           
            var check = /^1[3-9]\d{9}$/;
            var testphone =check.test(this.phone);
            // this.phone=phone
            if(!testphone){
                this.phoneState='error'
                window.console.log("所输入号码不正确 请输入11位手机号码！")
                warning.innerHTML=` 手机号码格式不正确`
                return false
            }
            else{this.phoneState='success'
            console.log("收集号码正确");
                warning.innerHTML=''
            
                return true

            }       
    },
     checkPwd(){  // 验证密码
      let exp = /^[0-9]{6,18}$/;
      if(exp.test(this.pwd)){
        this.pwdState = 'success'
            warning.innerHTML=''
        return true
      }else{
        this.pwdState = 'error'
                window.console.log("密码格式不正确！")
                warning.innerHTML='密码不正确'
        return false
      }
    },
  
    },
}//
</script>

<style scoped>
#login{
    padding: 0 18px;
    margin-bottom: 15px;
    display: flex;
}
.left{
   margin: 9.5px 0 ; 
   z-index: 1000000;
}
span{
        width: 100%;
    height: 44px;
    line-height: 44px;
    position: absolute;
    left: 0;
    right: 0;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding: 0 90px;
    margin: 0 auto;
    box-sizing: border-box;
    color: #4A4945;
    overflow: hidden;
    text-overflow: ellipsis
}
.login{
    margin: 0 60px 0 0;
    padding: 0;
    overflow: hidden;
}
.phone{
    font-size: 25px;
    margin: 20px 15px 20px 20px;   
}
.mima{
    font-size: 25px;
    margin: 20px 15px 20px 20px;   
}
input{
    height: 35px;
    line-height: 35px;
    background-color: #FFFFFF;
    font-size: 18px;
    padding: 15px 18px;
    margin: 15px 0;
    border-radius: 0px;
    border: 0px;
    border-bottom: 1px solid  #E7E2E5;

}
.pwd{
    border: 0px;

}
.btn1{
        background-image: linear-gradient(to right,#0096FB,#1976D2);
    font-size: 18px;
    width: 250px;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    color: #FFFFFF;
    margin: 30px auto 0px;
    opacity: 0.5;
    text-align: center;
    user-select: none;
}
.btn1.active{
    opacity: 1;

}
.btn2{
     background-image: linear-gradient(to right,#0096FB,#1976D2);
    font-size: 18px;
    width: 200px;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    color: #FFFFFF;
    margin: 30px auto 0px;
    text-align: center;
}
.bg{
    width: 80%;
    max-width: 400px;
    font-size: 0;
    margin: 0 auto;
}
.bg img{
    width: 100%;
    overflow: hidden;
}
.bg .warn1{

    width: 80%;
    color: black;
    opacity: 0.8;
    font-size: 1px;
     text-align: center;
    line-height: 10px;
    
}

</style>